<template>
  <view class="border-box">
    <view class="out to-center">
      <view
        class="out-y to-center"
        :style="out_y_style"
      />
      <view
        class="out-x to-center"
        :style="out_x_style"
      />
    </view>
    <view
      class="in to-center"
      :style="in_style"
    >
      <view
        class="in-y to-center"
        :style="in_y_style"
      />
      <view
        class="in-x to-center"
        :style="in_x_style"
      />
    </view>
    <view
      class="content-slot"
      :style="content_style"
    >
      <slot />
    </view>
  </view>
</template>

<script>
export default {
  name: "BorderBox",
  props: {
    //组件边框颜色
    bdColor: {
      type: String,
      default: "#fcefda"
    },
    //组件背景颜色
    bgColor: {
      type: String,
      default: "#fffdf8"
    },
    //组件圆角
    bdRadius: {
      type: Number,
      default: 9
    },
    //组件边框粗细
    borderWidth: {
      type: Number,
      default: 1
    },
    //组件内边距，不能小于圆角，否则自动设置圆角2倍
    insidePadding: {
      type: Number,
      default: 0
    }
  },
  computed: {
    out_y_style() {
      return {
        "background-color": this.bdColor,
        "border-radius": `${this.bdRadius}px`,
        width: `calc(100% - ${this.bdRadius * 2}px)`
      };
    },
    out_x_style() {
      return {
        "background-color": this.bdColor,
        "border-radius": `${this.bdRadius}px`,
        height: `calc(100% - ${this.bdRadius * 2 - 1}px)`
      };
    },
    in_style() {
      return {
        width: `calc(100% - ${this.borderWidth * 2}px)`,
        height: `calc(100% - ${this.borderWidth * 2}px)`
      };
    },
    in_y_style() {
      return {
        "background-color": this.bgColor,
        "border-radius": `${this.bdRadius}px`,
        width: `calc(100% - ${this.bdRadius * 2}px)`
      };
    },
    in_x_style() {
      return {
        "background-color": this.bgColor,
        "border-radius": `${this.bdRadius}px`,
        height: `calc(100% - ${this.bdRadius * 2 - 1}px)`
      };
    },
    content_style() {
      return {
        padding: `${this.insidePadding}px`
      };
    }
  }
};
</script>

<style lang="scss">
.border-box {
  position: relative;
  .to-center {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
  .out {
    width: 100%;
    height: 100%;
    .out-y {
      z-index: 1;
      height: 100%;
    }
    .out-x {
      z-index: 1;
      width: 100%;
    }
  }
  .in {
    .in-y {
      z-index: 1;
      height: 100%;
    }
    .in-x {
      z-index: 1;
      width: 100%;
    }
  }
  .content-slot {
    z-index: 2;
    position: relative;
  }
}
</style>
